<template>
  <view class="case-list">
    <!-- Search Bar -->
    <view class="search-bar">
      <input 
        type="text" 
        v-model="searchQuery" 
        placeholder="搜索案件" 
        @input="handleSearch"
      />
    </view>

    <!-- Case List -->
    <view class="case-items">
      <view 
        v-for="(item, index) in caseList" 
        :key="index" 
        class="case-item"
        @click="goToDetail(item.id)"
      >
        <view class="case-header">
          <text class="case-title">{{ item.title }}</text>
          <text class="case-status" :class="item.status">{{ getStatusText(item.status) }}</text>
        </view>
        <view class="case-info">
          <text>案件编号：{{ item.caseNumber }}</text>
          <text>创建时间：{{ formatDate(item.createTime) }}</text>
        </view>
        <view class="case-description">{{ item.description }}</view>
      </view>
    </view>

    <!-- Pagination -->
    <view class="pagination">
      <button 
        :disabled="currentPage === 1" 
        @click="handlePageChange(currentPage - 1)"
      >上一页</button>
      <text>{{ currentPage }} / {{ totalPages }}</text>
      <button 
        :disabled="currentPage === totalPages" 
        @click="handlePageChange(currentPage + 1)"
      >下一页</button>
    </view>

    <!-- Add New Case Button -->
    <view class="add-case">
      <button @click="goToCreate" type="primary">新建案件</button>
    </view>
  </view>
</template>

<script>
import { getCaseList } from '@/api/case'

export default {
  data() {
    return {
      caseList: [],
      searchQuery: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      totalPages: 1,
      loading: false
    }
  },

  onLoad() {
    this.fetchCaseList()
  },

  methods: {
    async fetchCaseList() {
      try {
        this.loading = true
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          query: this.searchQuery
        }
        
        const response = await getCaseList(params)
        this.caseList = response.data.list
        this.total = response.data.total
        this.totalPages = Math.ceil(this.total / this.pageSize)
      } catch (error) {
        uni.showToast({
          title: '获取案件列表失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    handleSearch() {
      this.currentPage = 1
      this.fetchCaseList()
    },

    handlePageChange(page) {
      this.currentPage = page
      this.fetchCaseList()
    },

    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/case/detail?id=${id}`
      })
    },

    goToCreate() {
      uni.navigateTo({
        url: '/pages/case/create'
      })
    },

    getStatusText(status) {
      const statusMap = {
        pending: '待处理',
        processing: '处理中',
        completed: '已完成',
        cancelled: '已取消'
      }
      return statusMap[status] || status
    },

    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
    }
  }
}
</script>

<style>
.case-list {
  padding: 20rpx;
}

.search-bar {
  margin-bottom: 20rpx;
}

.search-bar input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.case-items {
  margin-bottom: 20rpx;
}

.case-item {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.case-title {
  font-size: 32rpx;
  font-weight: bold;
}

.case-status {
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
}

.case-status.pending {
  background-color: #ffd700;
}

.case-status.processing {
  background-color: #87ceeb;
}

.case-status.completed {
  background-color: #90ee90;
}

.case-status.cancelled {
  background-color: #ff6b6b;
}

.case-info {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.case-info text {
  margin-right: 20rpx;
}

.case-description {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20rpx 0;
}

.pagination button {
  margin: 0 20rpx;
  min-width: 160rpx;
}

.pagination text {
  font-size: 28rpx;
}

.add-case {
  position: fixed;
  bottom: 40rpx;
  right: 40rpx;
}

.add-case button {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}
</style>